<template>
  <!-- 所有标签都必须写在一个div中 -->
  <div id="container">
    <el-row>
      <h1><i class="el-icon-eleme"></i>{{sysname}}</h1>
    </el-row>
    <el-row>
      <el-button type="primary" @click="toadd" icon="el-icon-search">添加</el-button>
    </el-row>
    <el-row>
      <el-table :data="list" style="width: 100%;">
        <el-table-column prop="title" label="标题" width="280" header-align="center" />
        <el-table-column prop="sellpoint" label="卖点" width="200" header-align="center" />
        <el-table-column prop="price" label="价格" align="right" header-align="center" width="100" />
        <el-table-column prop="intro" label="说明" header-align="center" />

        <el-table-column label="[操作]" width="220" header-align="center">
          <!-- 这是element-ui提高机制，它封装日常需要值，它就直接提高
            相当于插槽对象别名，通过别名引用它提供变量 index，row
           -->
          <template slot-scope="s">
            <!--  两个参数：第一个参数当前行索引值，第二个参数当前行数据 -->
            <el-button type="success" @click="toupdate(s.$index, s.row)" icon="el-icon-check">修改</el-button>
            <el-button type="danger" @click="del(s.$index)" icon="el-icon-close">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
    </el-row>

    <!-- 怎么控制对话框是否展现？dialogVisible布尔变量true展现，false关闭
      变量要在 数据区声明的
      v-bind:visible 属性element-ui检查属性，设置是否展现div，display:none
    -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>
        <el-form :model="m" label-width="80px">
          <el-form-item label="标题">
            <el-input v-model="m.title" />
          </el-form-item>
          <el-form-item label="卖点">
            <el-input v-model="m.sellpoint" />
          </el-form-item>
          <el-form-item label="价格">
            <el-input v-model="m.price" />
          </el-form-item>
          <el-form-item label="说明">
            <el-input type="textarea" v-model="m.intro" />
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible=false">取消</el-button>
        <el-button @click="save">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  //这个数据区，只允许本组件使用
  export default {
    name: "Item",
    data() {
      return {
        sysname: "京东电商平台",
        dialogVisible: false, //负责对话框是否展现
        isUpdate: false, //新增按钮设置false，修改按钮true，有了这个值，save方法就知道是新增还是修改
        index: null, //全局变量，代表当前的索引值
        m: { //临时存放一条数据结构model，pojo
          title: null,
          sellpoint: '',
          price: '',
          intro: ''
        },
        list: [{
            title: "大话Java：程序设计从入门到精通",
            sellpoint: "孙卫琴",
            price: 40.0,
            intro: "跟着孙悟空学Java，从此告别枯燥的技术学习。基于JDK9版本讲解Java编程思想、架构、代码管理等，全面了解Java编程的基本技术，32节同步讲解视频课程。"
          },
          {
            title: "Java从入门到精通（第5版）",
            sellpoint: "孙卫琴",
            price: 55.20,
            intro: "297个应用实例+37个典型应用+30小时教学视频+海量开发资源库，丛书累计销量200多万册团购热线010-89113777"
          },
          {
            title: "Java编程思想（第4版） [thinking in java]",
            sellpoint: "Bruce Eckel",
            price: 79.20,
            intro: "Java学习必读经典,殿堂级著作！赢得了全球程序员的广泛赞誉 团购热线010-89113777"
          },
          {
            title: "Java核心技术 卷I 基础知识（原书第11版）",
            sellpoint: "凯•S.霍斯特曼",
            price: 109.30,
            intro: "CoreJava第11版，Jolt大奖获奖作品，与Java编程思想、EffectiveJava、深入理解Java虚拟机堪称：Java四大名著"
          },
          {
            title: "Spring Cloud Alibaba微服务原理与实战",
            sellpoint: "谭锋",
            price: 83.60,
            intro: "SpringCloudAlibba首著/12年Java开发及架构经验总结/微服务架构与分布式系统必备团购热线010-89113777"
          },
        ]
      }
    },
    methods: {
      toadd: function() {
        //防止数据已经有值，干扰，清空数据
        this.m = {};

        //展现对话框，要调用数据区中数据，加this
        this.dialogVisible = true;
        this.isUpdate = false;
      },
      toupdate: function(index, row) {  //形参
        //获取当前数据，回显：对话框中数据form表单，表单是和m绑定
        //this.m = row;   //row和m是一个引用！！一个改全都改。解决办法：把它们关系取消，不是同一个引用
        this.m = JSON.parse(JSON.stringify(row)); //m和row就没有关系了

        this.dialogVisible = true;
        this.isUpdate = true;
        this.index = index; //前面的index是全局参数，数据区中定义的；后面index是toupdate的参数
      },
      save: function() { //这个方法复用，新增和修改都使用它
        if (!this.isUpdate) {  //!取反，!true=false,!false=true；
          //在list数组中新增元素
          this.list.splice(0, 0, this.m);
        }else{
          //修改，index怎么来？在修改按钮通过插槽传入index，可以设置全局变量，来记录这个值
          //1.数据区：index变量，2.修改按钮，设置index，3.在这获取数据区index
          this.list.splice(this.index, 1, this.m);
        }
        this.dialogVisible = false;
      },
      del: function(index) {
        //通过插槽vue+element-ui提供，它就把index索引值传递过来
        //删除指定数组的索引值，删除1个
        this.list.splice(index, 1);
      }
    }
  }
</script>

<style>
  /* 这个字体不一致，是element-ui自己的问题，手工设置微软雅黑字体 */
  textarea{
    font-family: "微软雅黑";
  }
</style>
